<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="left" @click="goBack">
        <image class="back-icon" src="/static/back-icon.png"></image>
      </view>
      <text class="nav-title">设备进场</text>
    </view>
    
    <!-- 设备进场表单 -->
    <scroll-view class="form-content" scroll-y>
      <!-- 表单内容 -->
      <view class="form-list">
        <!-- 供应商 -->
        <view class="form-item">
          <text class="form-label">供应商</text>
          <view class="picker-container" @click="showPicker('supplier')">
            <text class="picker-text" :class="{'selected': form.supplier}">{{form.supplier || '请选择'}}</text>
            <image class="arrow-icon" src="/static/arrow-down.png"></image>
          </view>
        </view>
        
        <!-- 供应商合同 -->
        <view class="form-item">
          <text class="form-label">供应商合同</text>
          <view class="picker-container" @click="showPicker('contract')">
            <text class="picker-text" :class="{'selected': form.contract}">{{form.contract || '请选择'}}</text>
            <image class="arrow-icon" src="/static/arrow-down.png"></image>
          </view>
        </view>
        
        <!-- 设备编号 -->
        <view class="form-item">
          <text class="form-label">设备编号</text>
          <input class="form-input" type="text" v-model="form.id" placeholder="请输入" />
        </view>
        
        <!-- 设备名称 -->
        <view class="form-item">
          <text class="form-label">设备名称</text>
          <input class="form-input" type="text" v-model="form.name" placeholder="请输入" />
        </view>
        
        <!-- 台班单位 -->
        <view class="form-item">
          <text class="form-label">台班单位</text>
          <input class="form-input" type="text" v-model="form.unit" placeholder="请输入" />
        </view>
        
        <!-- 规格/型号 -->
        <view class="form-item">
          <text class="form-label">规格/型号</text>
          <input class="form-input" type="text" v-model="form.model" placeholder="请输入" />
        </view>
        
        <!-- 主要参数 -->
        <view class="form-item">
          <text class="form-label">主要参数</text>
          <input class="form-input" type="text" v-model="form.mainParams" placeholder="请输入" />
        </view>
        
        <!-- 油耗定额 -->
        <view class="form-item">
          <text class="form-label">油耗定额</text>
          <input class="form-input" type="text" v-model="form.fuelQuota" placeholder="请输入" />
        </view>
        
        <!-- 定额单位 -->
        <view class="form-item">
          <text class="form-label">定额单位</text>
          <input class="form-input" type="text" v-model="form.quotaUnit" placeholder="请输入" />
        </view>
        
        <!-- 设备类别 -->
        <view class="form-item">
          <text class="form-label">设备类别</text>
          <view class="picker-container" @click="showPicker('category')">
            <text class="picker-text" :class="{'selected': form.category}">{{form.category || '请选择'}}</text>
            <image class="arrow-icon" src="/static/arrow-down.png"></image>
          </view>
        </view>
      </view>
      
      <!-- 提交按钮 -->
      <view class="submit-button">
        <button class="submit-btn" @click="submitForm">提交</button>
      </view>
    </scroll-view>
    
    <!-- 底部弹出选择器 - 供应商 -->
    <view class="picker-popup" v-if="showSupplierPicker">
      <view class="picker-mask" @click="hidePicker"></view>
      <view class="picker-content">
        <view class="picker-header">
          <text class="cancel-btn" @click="hidePicker">取消</text>
          <text class="picker-title">请选择供应商</text>
          <text class="confirm-btn" @click="hidePicker">确认</text>
        </view>
        <scroll-view class="picker-list" scroll-y>
          <view 
            class="picker-item" 
            v-for="(item, index) in supplierList" 
            :key="index"
            @click="selectSupplier(item)">
            <text class="picker-item-text">{{item.name}}</text>
          </view>
        </scroll-view>
      </view>
    </view>

    <!-- 底部弹出选择器 - 供应商合同 -->
    <view class="picker-popup" v-if="showContractPicker">
      <view class="picker-mask" @click="hidePicker"></view>
      <view class="picker-content">
        <view class="picker-header">
          <text class="cancel-btn" @click="hidePicker">取消</text>
          <text class="picker-title">请选择供应商合同</text>
          <text class="confirm-btn" @click="hidePicker">确认</text>
        </view>
        <scroll-view class="picker-list" scroll-y>
          <view 
            class="picker-item" 
            v-for="(item, index) in contractList" 
            :key="index"
            @click="selectContract(item)">
            <text class="picker-item-text">{{item.name}}</text>
          </view>
        </scroll-view>
      </view>
    </view>

    <!-- 底部弹出选择器 - 设备类别 -->
    <view class="picker-popup" v-if="showCategoryPicker">
      <view class="picker-mask" @click="hidePicker"></view>
      <view class="picker-content">
        <view class="picker-header">
          <text class="cancel-btn" @click="hidePicker">取消</text>
          <text class="picker-title">请选择设备类别</text>
          <text class="confirm-btn" @click="hidePicker">确认</text>
        </view>
        <scroll-view class="picker-list" scroll-y>
          <view 
            class="picker-item" 
            v-for="(item, index) in categoryList" 
            :key="index"
            @click="selectCategory(item)">
            <text class="picker-item-text">{{item.name}}</text>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: '',
      showSupplierPicker: false,
      showContractPicker: false,
      showCategoryPicker: false,
      supplierList: [
        { id: 1, name: '供应商1' },
        { id: 2, name: '供应商2' },
        { id: 3, name: '供应商3' }
      ],
      contractList: [
        { id: 1, name: '合同1' },
        { id: 2, name: '合同2' },
        { id: 3, name: '合同3' }
      ],
      categoryList: [
        { id: 1, name: '挖掘机' },
        { id: 2, name: '推土机' },
        { id: 3, name: '装载机' },
        { id: 4, name: '起重机' }
      ],
      form: {
        supplier: '',
        contract: '',
        id: '',
        name: '',
        unit: '',
        model: '',
        mainParams: '',
        fuelQuota: '',
        quotaUnit: '',
        category: ''
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      this.id = options.id;
      // 可以根据ID加载设备信息填充表单
      this.form.id = this.id;
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    showPicker(field) {
      if (field === 'supplier') {
        this.showSupplierPicker = true;
      } else if (field === 'contract') {
        this.showContractPicker = true;
      } else if (field === 'category') {
        this.showCategoryPicker = true;
      }
    },
    hidePicker() {
      this.showSupplierPicker = false;
      this.showContractPicker = false;
      this.showCategoryPicker = false;
    },
    selectSupplier(supplier) {
      this.form.supplier = supplier.name;
      this.hidePicker();
    },
    selectContract(contract) {
      this.form.contract = contract.name;
      this.hidePicker();
    },
    selectCategory(category) {
      this.form.category = category.name;
      this.hidePicker();
    },
    submitForm() {
      // 表单验证
      if (!this.form.supplier) {
        uni.showToast({
          title: '请选择供应商',
          icon: 'none'
        });
        return;
      }
      
      if (!this.form.contract) {
        uni.showToast({
          title: '请选择供应商合同',
          icon: 'none'
        });
        return;
      }
      
      if (!this.form.id) {
        uni.showToast({
          title: '请输入设备编号',
          icon: 'none'
        });
        return;
      }
      
      if (!this.form.name) {
        uni.showToast({
          title: '请输入设备名称',
          icon: 'none'
        });
        return;
      }
      
      // 提交表单
      uni.showLoading({
        title: '提交中...'
      });
      
      // 模拟提交
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '提交成功',
          icon: 'success'
        });
        
        // 返回上一页
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      }, 1000);
    }
  }
}
</script>

<style>
/* 移除页面加载后的伪元素 */
:root uni-page-body::after {
  display: none !important;
}

.container {
  flex: 1;
  background-color: #FFFFFF;
}

.nav-bar {
  height: 88px;
  background: linear-gradient(103deg, #4980FF -4%, #2B6BFF 99%);
  padding-top: 44px;
  padding-left: 15px;
  padding-right: 15px;
  flex-direction: row;
  align-items: center;
  position: relative;
}

.left {
  position: absolute;
  left: 15px;
  height: 24px;
  width: 24px;
  justify-content: center;
  align-items: center;
}

.back-icon {
  width: 24px;
  height: 24px;
}

.nav-title {
  font-size: 18px;
  color: #FFFFFF;
  font-weight: 500;
  margin-left: 24px;
}

.form-content {
  flex: 1;
}

.form-list {
  flex-direction: column;
}

.form-item {
  flex-direction: row;
  padding: 0 16px;
  border-bottom-width: 0.5px;
  border-bottom-color: #EEEEEE;
  border-bottom-style: solid;
  width: 359px;
  height: 56px;
  align-self: center;
  align-items: center;
}

.form-label {
  width: 81px;
  height: 24px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.9);
  line-height: 24px;
}

.form-input-container {
  flex: 1;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-left: 16px;
}

.form-input {
  flex: 1;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  margin-left: 16px;
  height: 56px;
}

.placeholder {
  color: rgba(29, 33, 41, 0.65);
}

.arrow-icon {
  width: 7.35px;
  height: 4.82px;
}

.submit-button {
  padding: 0 30px;
  margin-top: 84px;
  margin-bottom: 20px;
  width: 100%;
}

.submit-btn {
  height: 44px;
  border-radius: 22px;
  font-size: 16px;
  color: #4980FF;
  background-color: #F0F5FF;
  border-width: 0;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  width: 100%;
}

button::after {
  border: none !important;
  outline: none !important;
}

/* 选择器样式 */
.picker-container {
  flex: 1;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin-left: 16px;
}

.picker-text {
  font-size: 16px;
  color: rgba(29, 33, 41, 0.65);
  margin-right: 5px;
}

.picker-text.selected {
  color: rgba(0, 0, 0, 0.85);
}

/* 选择器弹出层样式 */
.picker-popup {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: transparent;
  z-index: 999;
}

.picker-mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
}

.picker-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #FFFFFF;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.picker-header {
  height: 53px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  border-bottom-width: 0.5px;
  border-bottom-color: #EEEEEE;
}

.cancel-btn {
  font-size: 15px;
  color: #165DFF;
}

.confirm-btn {
  font-size: 15px;
  color: #165DFF;
}

.picker-title {
  font-size: 15px;
  color: #333333;
  font-weight: 500;
}

.picker-list {
  max-height: 400px;
  padding-top: 50px;
}

.picker-item {
  height: 44px;
  justify-content: center;
  align-items: center;
  margin: 0 16px;
  border-bottom-width: 1px;
  border-bottom-color: #EEEEEE;
  border-bottom-style: solid;
}

.picker-item:first-child {
  border-top-width: 1px;
  border-top-color: #EEEEEE;
  border-top-style: solid;
}

.picker-item:last-child {
  border-bottom-width: 0;
}

.picker-item-text {
  font-size: 16px;
  color: #333333;
}
</style> 